<template>
    <div class="det">
        <div class="news">
            <ul>
                <li v-for="news in newsList" :key="news.id">
                    <!-- <router-link :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">{{
                        news.title }}</router-link> -->

                    <!-- <router-link
                        :to="{ path: '/news/detail', query: { id: news.id, title: news.title, content: news.content } }">{{
                            news.title }}</router-link> -->


                    <!-- <router-link :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{{
                        news.title }}</router-link> -->
                    <router-link
                        :to="{ name: 'xijie', params: { id: news.id, title: news.title, content: news.content } }">{{
                            news.title }}</router-link>
                </li>
            </ul>
        </div>
        <div class="detail">
            <router-view></router-view>
        </div>
    </div>
</template>


<script setup lang="ts" name="News">
import { onMounted, reactive } from 'vue'
const newsList = reactive([
    { id: 'asfdtrfay01', title: "很好的抗癌食物", content: '西蓝花' },
    { id: 'asfdtrfay02', title: '如何一夜暴富', content: '学IT' },
    { id: 'asfdtrfay03', title: "震惊，万万没想到", content: '明天是周一' },
    { id: 'asfdtrfay04', title: "好消息!", content: '快过年了' }
])
onMounted(() => {


    class Person {
        name: string;
        age: number;
        constructor(name: string, age: number) {
            this.name = name;
            this.age = age;
        }
    }
    const per = new Person("孙悟空", 18);

    console.log(per);
    // 现在属性是在对象中设置的，属性可以任意的被修改，
    // 属性可以任意被修改将会导致对象中的数据变得非常不安全
    per.name = '猪八戒',
        per.age = -38
    console.log(per);

    abstract class Animal {

        name: string
        age: number
        constructor(name: string, age: number) {

            this.name = name,
                this.age = age
        }
        abstract sayHi(): void

    }

    class Dog extends Animal {
        len: number
        constructor(name: string, age: number, len: number) {
            super(name, age)
            this.len = len
        }
        run() {
            console.log(`${this.name}在跑`);

        }
        sayHi() {
            console.log(`${this.name}叫叫`);

        }
    }
    class Cat extends Animal {
        sex: string
        constructor(name: string, age: number, sex: string) {
            super(name, age,)
            this.sex = sex
        }
        sayHi() {
            console.log(`${this.name}叫叫`);

        }
    }



    // class Dog {
    //     name: string
    //     age: number
    //     constructor(name: string, age: number) {

    //         this.name = name,
    //             this.age = age
    //     }
    //     sayHi() {
    //         console.log("汪汪");

    //     }
    // }
    // class Cat {
    //     name: string
    //     age: number
    //     constructor(name: string, age: number) {

    //         this.name = name,
    //             this.age = age
    //     }
    //     sayHi() {
    //         console.log("miaomiao");

    //     }
    // }
    const dog = new Dog("狗狗", 11, 365)
    console.log(dog);
    dog.sayHi()
    dog.run()
    const cat = new Cat("猫猫", 18, "男")
    console.log(cat);
    // cat.sayHi()

})

interface myFace {
    name: string,
    age: number
}
let info: myFace = {
    name: "xiaoj",
    age: 15
}



</script>
<style scoped>
.det {
    display: flex;
    justify-content: space-around;
}
</style>